<template>
    <div class="page-view">
        <div>
            <div class="page-body">
                <div class="title">
                    <span>页面</span>
                    <i class="el-icon-plus" @click.stop="showCreatePageInput"></i>
                </div>
                <ul class="page-warp">
                    <li :class="activePage === index ? 'layer-item layer-item-flex layer-item-active' : 'layer-item layer-item-flex'" v-for="(item, index) in pageList" :key="item.id" @click="setPageIndex(index)">
                        <div class="layer-item-c">
                            <i :class="item.visible ? 'el-icon-check show-icon' : 'el-icon-check show-unvisable'" @click.stop="setPageVisiable(item)"></i>
                            <!-- <i :class="item.visible ? 'el-icon-thumb show-icon' : 'el-icon-thumb show-unvisable'" @click="showAndSelectPage(index)"></i> -->
                            <input type="text" :value="`${ item.name }`" :readonly="active !== index" :class="active !== index ? 'layer-readonly-input mini-ipt' : 'layer-readonly-input-edit mini-ipt'" :id="window.getRootName() + 'PAGE_NAME_' + index" v-on:blur="savePageName(index)" v-on:keyup.enter="savePageName(index)" maxlength="50" :title="item.name" />
                        </div>
                        <!-- <i class="el-icon-edit" @click="updatePageName(index)" title="编辑"></i>
                        <i class="el-icon-document-copy" @click="copyPage(item, index)" title="复制"></i>
                        <i class="el-icon-close" @click="removePage(index)" v-if="pageList.length > 1" title="删除"></i> -->
                        <el-popover
                            :ref="`popover-${index}`"
                            popper-class="review-popover"
                            placement="right"
                            trigger="click">
                            <div class="popover-content">
                                <div @click="updatePageName(index);$refs[`popover-${index}`][0].doClose()">
                                    <i class="el-icon-reading" title="重命名"></i>
                                    <span>重命名</span>
                                </div>
                                <div @click="copyPage(item, index);$refs[`popover-${index}`][0].doClose()">
                                    <i class="el-icon-copy-document" title="创建副本"></i>
                                    <span>创建副本</span>
                                </div>
                                <div v-if="pageList.length > 1" @click="removePage(index)">
                                    <i class="el-icon-delete" title="删除"></i>
                                    <span>删除</span>
                                </div>
                            </div>
                            <div class="outline-more" slot="reference">
                                <i class="el-icon-more-outline" slot="reference" title="更多" @click.stop="handlePopover(index)"></i>
                            </div>
                        </el-popover>
                    </li>
                    <input :id="window.getRootName() + 'PAGE_NAME_INPUT'" type="text" value="" class="create-page-input main-mas-input-simple mas-basic-layout mas-basis-input" v-if="pageInputVisible" v-on:blur="createPage()" v-on:keyup.enter="createPage('enter')" ref="createPageInput" maxlength="50" />
                </ul>
            </div>
        </div>
        <!-- 清除画布弹窗 -->
        <el-dialog title="提示" :visible.sync="removePageVisible" width="500px" top="35vh">
            <div>是否要删除该页面？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="removePageVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmRemovePage">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import store from '@/js/store/state.js';
import history from '@/js/main/history.js';
import message from '@/js/util/message.js';

var num = 1;
export default {
    data() {
        return {
            window: window,
            activePage: store.getPageIndex(),
            pageList: store.getPageList(),
            pageInputVisible: false,
            active: null,
            elementSortList: store.getElementSortList(),
            removePageVisible: false,
            currRemovePageIndex: null
        };
    },
    methods: {
        updatePageName(index) {
            this.active = index;
            let element = document.getElementById(`${window.getRootName()}PAGE_NAME_${index}`);
            element.focus();
            let rangeStart = this.pageList[index].name ? this.pageList[index].name.length : 0;
            element.setSelectionRange(rangeStart, rangeStart);
        },
        showCreatePageInput() {
            let inputValue = '';
            this.pageInputVisible = !this.pageInputVisible;
            while (true) {
                inputValue = '页面' + num;
                num++;
                let index = this.getDynamicTagIndex(inputValue);
                if (index < 0) {
                    break;
                }
            }
            this.$nextTick(() => {
                let pageInput = document.getElementById(`${this.window.getRootName()}PAGE_NAME_INPUT`);
                pageInput.focus();
                pageInput.value = inputValue;
            });
        },
        getDynamicTagIndex(value) {
            let index = -1;
            for (let i = 0; i < this.pageList.length; i++) {
                if (this.pageList[i].name === value) {
                    index = i + 1;
                    break;
                }
            }
            return index;
        },
        createPage(type) {
            if (type) {
                this.pageInputVisible = false;
                return;
            }
            let val = this.$refs.createPageInput.value;
            let pageNameList = [];
            val = val.replace(/\s*/g, '');
            if (!val) {
                return;
            }
            this.pageList.forEach((item) => {
                pageNameList.push(item.name);
            });
            if (pageNameList.indexOf(val) !== -1) {
                message.message('已有相同名称页面，不可重复添加！', 'error');
                return;
            }
            let pageObject = {
                name: val,
                visible: true
            };
            store.addPage(pageObject);
            this.pageInputVisible = false;
            history.addHistory(store.clone(), 9);
        },
        removePage(index) {
            this.removePageVisible = true;
            this.currRemovePageIndex = index;
        },
        copyPage(item, index) {
            let pageObject = {
                name: item.name + '副本',
                visible: true
            };
            store.addPage(pageObject);
            store.setPageIndex(this.pageList.length - 1);
            store.copyPage(index);
            history.addHistory(store.clone(), 178);
        },
        confirmRemovePage() {
            if (store.removePageAt(this.currRemovePageIndex)) {
                if (this.currRemovePageIndex === store.getPageIndex()) {
                    store.setPageIndex(0);
                }
                let currentElement = store.getCurrentElementList();
                for (let index = 0; index < currentElement.length; index++) {
                    const element = currentElement[index];
                    if (element.attribute.page === this.currRemovePageIndex) {
                        currentElement.splice(currentElement.indexOf(element), 1);
                    }
                }
                this.activePage = 0;
                history.addHistory(store.clone(), 10);
                this.removePageVisible = false;
                this.currRemovePageIndex = null;
            }
        },
        showAndSelectPage(index) {
            this.pageList.forEach((item) => {
                item.visible = false;
            });
            this.activePage = index;
            this.pageList[index].visible = true;
            store.setPageIndex(index);
        },
        setPageVisiable(page) {
            page.visible = !page.visible;
        },
        setPageIndex(index) {
            this.activePage = index;
            store.setPageIndex(index);
        },
        savePageName(index) {
            let val = document.getElementById(`${this.window.getRootName()}PAGE_NAME_${index}`).value;
            if (!val) {
                message.message('页面名称不可为空！', 'error');
                return;
            }
            this.pageList[index].name = val;
            this.active = null;
            history.addHistory(store.clone(), 11);
        },
        handlePopover(index) {
            for (let index = 0; index < this.pageList.length; index++) {
                this.$refs[`popover-${index}`][0].doClose();
            }
            this.$refs[`popover-${index}`][0].doShow();
        }
    }
};
</script>

<style lang='scss' scoped>
.page-view {
    position: relative;
    .page-body {
        padding: 0 0 0 12px;
        border-bottom: 1px solid #000000;
        overflow: hidden;
        .page-warp {
            height: 200px;
            overflow: hidden;
            overflow-y: scroll;
        }
        .title {
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            background-color: #212121;
            color: $FontWhite;
            font-weight: 600;
            padding: 0 5px;
            i {
                font-weight: 500;
            }
        }
    }
    .layer-readonly-input {
        background: transparent;
        height: 100%;
        // padding-left: 10px;
        text-align: left;
        color: $FontWhite;
    }
    .layer-readonly-input-edit {
        height: 30px;
        background: #333333;
        border-radius: 6px;
        text-align: left;
        // padding-left: 10px;
        height: 25px;
        color: $FontWhite;
    }
    .mini-ipt {
        // width: 114px;
        cursor: pointer;
        user-select: none;
        // padding-left: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex: 1;
    }
    // .el-icon-close {
    //     font-weight: 600;
    // }
    .layer-item-c {
        display: flex;
        align-items: center;
        flex: 1;
    }
    .layer-item {
        padding-left: 15px;
        padding-right: 10px;
        height: 30px;
        display: flex;
        align-items: center;
        border-radius: 4px;
        margin-bottom: 4px;
        cursor: pointer;
        &:hover {
            background: #2d2d2d;
        }
        .el-icon-check {
            cursor: pointer;
            margin-right: 8px;
        }
    }
    .layer-item-active {
        background: #3662ec4d;
        font-weight: 600;
    }
    .layer-item-active:hover {
        background: #3662ec4d;
    }
    .layer-item-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .el-icon-plus {
        cursor: pointer;
    }
    .create-page {
        background: #3662ec4d;
        margin-bottom: 4px;
        cursor: pointer;
    }
    .create-page:hover {
        background: #3662ec4d;
    }
    .create-page-input {
        height: 30px;
        width: 100%;
        padding-left: 20px;
        margin-bottom: 4px;
        color: $FontWhite;
    }
    .show-icon {
        color: white;
        cursor: pointer;
        font-weight: bold;
        margin-right: 4px;
    }
    .show-unvisable {
        color: gray;
        margin-right: 4px;
    }
}
.review-popover {
    .popover-content {
        padding: 10px;
        > div {
            display: flex;
            align-items: center;
            cursor: pointer;
            margin-bottom: 10px;
            &:hover {
                opacity: 0.8;
            }
            &:last-child {
                margin-bottom: 0;
            }
            > span {
                font-size: 12px;
                color: #ffffff;
                margin-left: 8px;
            }
        }
    }
}
.outline-more {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>